<template>
  <div class="inn_dialog">
    <Title :title="technology"></Title>
    <div id="exploit"></div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import Title from "@/components/title.vue";
export default {
  components: {
    Title,
  },
  data(){
    return {
      direction:[],
      technology:'开发方向',
    }
  },
  methods:{

    //初始化
    echartsInit(){
      // //获取挂载元素，Echarts.init：初始化Echarts
      let chartDom=Echarts.init(document.querySelector("#exploit"))
      window.addEventListener('resize', function() {
        chartDom.resize();
      });
      let option  = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle:{
            fontSize: 8,
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '60%'],
            center: ['50%', '42%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              show: true,
              fontSize: 10,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 7,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 6,
              length2: 8
            },
            data: this.direction,
          }
        ]
      }
      option &&  chartDom.setOption(option)
    },

    getDirection() {
      // 获取用户信息
      this.$axios.getDirection({type:1}).then(res => {
        if(res.data.length == 0) return
        this.direction = []
        res.data.forEach((item,i)=>{
          this.direction.push({})
          this.direction[i].name = item.name
          this.direction[i].value = 1 + 0
        })
        this.echartsInit()
      })
    }
  },

  mounted() {
    this.getDirection()
  }
}
</script>

<style scoped lang="less">
.inn_dialog{
  height: calc( 100% - 2vw);
  #exploit {
    height: 100%;
  }
}
</style>